<template>
    <div style="padding-bottom: 20px;">
    <div class="df">  <h2>结算申请单确认 <span  style="margin-left: 20px;color: #200281;">{{ Send.orderNo }}</span></h2></div>
    <div style="width: 100%;border-bottom: 1px solid #000;"><h2><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">药品信息</span></h2></div>
    <el-row :span="6" class="df" style="margin: 20px 0;">
      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
      <span style="display: block;width: 80px;">配送企业:</span> 
       <el-input v-model="Send.companyName" size="mini" :disabled="true"></el-input>
    </el-col>
    <el-col :span="6" >
         <span style="margin-right: 20px;">集采批次:</span>
         <el-select v-model="value3"  size="mini" placeholder="请选择">
          <el-option v-for="item in form" :key="item.value" :label="item.label" :value="item.value" >
          </el-option>
        </el-select>
      </el-col>
      
      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
      <span style="display: block;width: 80px;">订单号:</span> 
      <el-input  size="mini" v-model="form1" placeholder="请输入通用名" ></el-input>
    </el-col>
        <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
      <span style="display: block;width: 80px;">流水号:</span> 
      <el-input  size="mini" v-model="form2" placeholder="请输入通用名" ></el-input>
    </el-col>
      <el-button type="primary" class="ml" @click="search">查询</el-button>
    </el-row>
    <el-alert size="mini"
          show-icon style="background-color: #d3deee;border: 1px solid #2558ac; color: #2558ac;font-size: 14px;">
          药品种类总数 <span class="number">{{ num }}</span> 项，总金额<span class="number">{{ priceSum }}</span>元。
        </el-alert>
      <el-table
          :data="tableData1"
          style="width: 100%;margin-top: 20px;" size="mini">
          <el-table-column
            prop="billNo"
            label="集采批次"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderNo"
            label="流水号"
            width="180">
          </el-table-column>
          <el-table-column
          prop="medicineName"
            label="通用名"
            width="180">
          </el-table-column>
          <el-table-column
          prop="categoryName"
            label="品种名称">
          </el-table-column>
          <el-table-column label="采购数量">
        <template slot-scope="scope">
         {{ scope.row.purchaseAmount }}
        </template>
      </el-table-column>
          <el-table-column
          prop="purchasePrice"
            label="采购价(元)">
          </el-table-column>
          <el-table-column
          prop="purchaseFee"
            label="采购金额(元)">
          </el-table-column>
          <el-table-column
            label="发票代码"
            prop="">
          </el-table-column>
          <el-table-column
          prop="purchaseFee"
            label="发票附件">
          </el-table-column>
        </el-table>
        <div class="block" style="margin: 20px 0;margin-left: 60%;">
          <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="SIZE"
          :page-sizes="[10, 20, 30, 40]">
        </el-pagination>
     
      </div>
      <h2 style="text-align: left;padding-bottom: 20px;border-bottom: 1px solid 
      #000;"><i class="el-icon-document"></i><span style="margin-left: 20px;font-weight: normal;">附件</span>
      </h2>
  <avue-form ref="form" style="margin-top: 20px;padding: 0px;" :option="attachOption" v-model="attachForm" :upload-after="uploadAfter">
          </avue-form>
        <el-button class="width" type="primary" style="margin-left:45%;margin-right: 60px;"><i class="el-icon-check"></i>确认通过</el-button>
        <el-button class="width" style="margin-right: 60px;" type="info" @click="toUpdate"><i class="el-icon-close"></i>确认不通过</el-button>
        <el-button class="width" @click="hide">取消</el-button>
    </div>
    </template>
    
    <script>
      import {isAll,getDetail,getUpdate} from "../../api/businessTwo/order"
      import addBill from "../../components/orderDetail/addBill.vue"
      export default {
        components: {
          addBill,
        },
        props: {
            Send: {
                type: Object,
            },
            flag1:{
              type:Boolean
            }
        },
        data() {
          return {
            attachOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '确认结果附件',
            prop: 'attachFile',
            type: 'upload',
            drag: true,
            size:"medium",
            loadText: '附件上传中，请稍等',
            span: 24,
            data: {
              
            },
            action: "/api/orderDetail/importOrder"
          }
        ]
      }, 
      attachForm: {
        imgUrl:[]
      },
            form2:"",
            dialogScreen:false,
            cities:[],
            dialogVisible:false,
            addData:{},
            pageSize:10,
            tableData1:[],
            SIZE:0,
            form1:null,
            value2:null,
            value3:'',
            num:0,
              priceSum:0,
            currentPage:1,
            value:true,
            form:[
        {
          value: '1',
          label: '已配送'
        },
        {
          value: '0',
          label: '未配送'
        }
      ],
            tableData: []
          }
        },
        created(){
          this.getList()
    console.log(this.Send);
        },
        watch:{
          value3(newValue,oldValue){
  this.getList()
          }
  
        },
        methods:{
          async getList(){    
            if(this.value2===""&&this.form1===""){
            this.value2=null
            this.form1=null
          }else if(this.form1===""){
            this.form1=null
          }else if(this.value2===""){
            this.value2=null
          }   
             let res=await isAll({
              instName:this.Send.instName,
               deliverStatus:this.value3,
            medicineNo:this.form1, 
             })
             if(res.data.code==200){
              res.data.data.map((v)=>{
                v.purchaseAmount=Math.floor(v.purchaseAmount) 
                if(v.deliverStatus==1){
  v.deliverStatus=true
  return v
                }
              })
              console.log(res.data.data);
              this.tableData=res.data.data
             }
             this.number()
             this.SIZE=this.tableData.length
             this.changeTabel()
          },
          number(){
            this.priceSum=0
      this.num = this.tableData.length
      console.log(this.tableData);
            this.tableData.map((v)=>{
              if(v.purchaseFee===null){
  v.purchaseFee=0
              }
            this.priceSum+= parseFloat(v.purchaseFee)
            console.log(parseFloat(v.purchaseFee));
                   return v
            })
          },
          toUpdate(){
            getUpdate({
              id:this.Send.id,
              status:2
            }).then((data) => {
              this.getList();
                this.$message.success('提交成功');
            });
            this.hide()
          },
          typec(a){
      if(a.row.status==0){
        a.row.label="已入库"
        return "success"
      }else{
        a.row.label="未入库"
        return "info"
      }
          },
          toTop(data1){
  if(data1.deliverStatus==false){
              data1.deliverStatus=0
            }else{
              data1.deliverStatus=1
            }
  getDetail({
  id:data1.id,
  deliverStatus:data1.deliverStatus,
  status:data1.status,
  stock_explain:data1.stockExplain 
  }).then((data) => { 
  console.log(data);
  this.getList()
            });
            console.log(data1);
          },
          changeTabel(){
      this.tableData1 = this.tableData.slice((this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize)
    },
          search(){
            this.getList()
          },
            handleCurrentChange(val){
          this.currentPage=val
          this.changeTabel()
            },
            handleSizeChange(val){
              this.pageSize=val
              this.changeTabel()
            },
            hide(){
  this.$emit("changeTwo",false)
          }
          }
      }
    </script>
    
    <style lang="scss" scoped>
    .df{
      display: flex;
      align-items: center;
    }
    .jcsb{
      justify-content: space-between;
    }
    .el-table{
      margin-bottom: 30px;
    }
    .ml{
    margin-left: 60px;
    }
    ::v-deep th{
      background-color: #f1f1f1;
    }
    ::v-deep .el-table__cell{
      height: 50px !important;
    }
    h2{
      font-size: 18px;
    }
    .width{
      width: 120px;
      height: 36px;
    }
    .ret{
      margin-left: 30%;
      margin-right: 60px;
    }
    .number{
        font-size: 16px;
        color: #62c7f8;
      }
      ::v-deep th.el-table__cell{
  background-color: #fafafa;
  }
  ::v-deep .el-table__cell{
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
  }
  ::v-deep .cell{
  display: flex;
  justify-content: center;
  }
    </style>